<template>
  <div class="device-group-formlist mt-10">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column align="center" prop="groupName" label="群组名称" />
      <el-table-column align="center" prop="nodeNums" label="传感器节点数量" />
      <el-table-column align="center" prop="onlineNums" label="在线设备数量" />
      <el-table-column
        :formatter="utils.fcTime"
        align="center"
        prop="cTime"
        label="创建时间"
      />
      <el-table-column align="center" label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" @click="open(scope)" :icon="Edit" circle />
          <el-button type="danger" @click="del(scope)" :icon="Delete" circle />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex jc-c bg-fff pt-10 pb-10">
      <el-pagination
        hide-on-single-page
        background
        :currPage="currPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import * as api from "@/api/index";
import { onMounted, ref } from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
//格式化
import { inject } from "vue";
const utils = inject("utils");
//列表
const tableData = ref([]);
const getList = () => {
  let data = {
    currPage: currPage.value,
    pageSize: pageSize.value,
  };

  api.$groupList(data).then((res) => {
    tableData.value = res.data;
    total.value = res.total;
  });
};
//分页
const currPage = ref();
const pageSize = ref(5);
const total = ref(10); //总数
const changePage = (newPage) => {
  currPage.value = newPage;
  getList();
};
//修改
const open = (item) => {
  ElMessageBox.prompt("", "群组重命名", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder: "群组名称",
    inputValue: item.row.groupName,
  }).then(({ value }) => {
    let data = {
      groupName: value,
      id: item.row.id,
    };
    if (value) {
      api.$groupEdit(data).then((res) => {
        item.row.groupName = res.data.groupName;
        console.log(tableData.value.groupName);
        console.log(res.data);
        ElMessage({
          type: "success",
          message: "修改成功",
        });
      });
    }
  });
};
//删除
const del = (item) => {
  ElMessageBox.confirm("确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  }).then(() => {
    let data = {
      id: item.row.id,
    };
    api.$groupDel(data).then((res) => {
      tableData.value.splice(item.$index, 1);
      changePage();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    });
  });
};
//暴露给父组件
defineExpose({
  tableData,
  changePage,
  getList,
  total,
  currPage,
  pageSize,
});
const props = defineProps({
  keyWords: String,
});
onMounted(getList);
</script>

<style>
</style>